<template>
  <div class="itemContent">
   <div class="itemTop">
    <div class="itemTopLeft">
      <svg class="icon" aria-hidden="true">
         <use xlink:href="#icon-bofang"></use>
    </svg> 
    <span>播放全部<em>(共{{itemList.length}}首)</em></span></div>
    <div class="shoucang">+收藏({{ changeCount(subscribedCount) }})</div>
    </div>
    <div class="itemBottom" v-for="(item, i) in itemList" :key="item.id">
    <i>{{i+1}}</i>
    <div class="Music" @click="playMusic(i)">
       <span class="musicTitle">{{item.name}}</span> 
       <div class="musicAuthor">
    <span v-for="(j, index) in item.ar" :key="index">{{ j.name }}&nbsp;</span>
    </div>
    </div>
    <svg class="icon" aria-hidden="true" v-if="item.mv!==0">
         <use xlink:href="#icon-shipin1"></use>
    </svg> 
    <svg class="icon icon-right" aria-hidden="true">
         <use xlink:href="#icon-liebiao2"></use>
    </svg> 
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  setup () {
    function changeCount(num){
      if(num>10000){
        return (num/10000).toFixed(1)+'万'
      }
      return num
    }
    return {changeCount}
  },
  props:['itemList','subscribedCount'],
  methods:{
    ...mapMutations(['updatePlayList','updatePlayListIndex']),
    playMusic(i){
      this.updatePlayList(this.itemList)
      this.updatePlayListIndex(i)
    }
  }
}
</script>

<style lang="scss" scoped>
.itemContent{
  width: 100%;
  margin-top: .2rem ;
  border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;
  background-color: #fff;
  padding-bottom: 1rem;
  .itemTop{
   display: flex;
   justify-content: space-between;
   align-items: center;  
   padding: .3rem;
   width: 100%;
   height: 1rem;
   .itemTopLeft{
    width: 45%;
    display: flex;
    justify-content: space-between;
    span{
    font-weight: 800;
    em{
      color: #ccc;
      font-size: .24rem;
      font-weight: normal;
      font-style: normal;
    }
   }
  
   }
.shoucang{
  width: 2rem;
  height: .6rem;
  border: 1px solid transparent;
  border-radius: 50px;
  line-height: .6rem;
  text-align: center;
  background-color: red;
  color: #fff;
  font-size: .28rem ;
}
  }
  .itemBottom {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .1rem .3rem ;
  i{
    width:10%;
    height:100%;
    line-height: 1rem;
    text-align: center;
    font-style: normal;
  padding-right: .1rem;
  }
  .Music{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  .musicTitle{
    font-size: .28rem;
     font-weight: 600;
  }
  .musicAuthor{
    font-size: .24rem;
    color: #ccc;
    padding-top: .04rem;
  }
  }
  .icon-right{
    margin-left:.2rem;
  }
}}
</style>